<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
		<script type="text/javascript" src="js/jquery.js"></script>
		<script type="text/javascript" src="js/jquery.wz_jsgraphics.js"></script>
		<script type="text/javascript" src="js/arrowsandboxes.js"></script>
		
		<link type="text/css" rel="stylesheet" href="style/arrowsandboxes.css">		
	</head>
	<style>
		body {
			font-family: Verdana, Arial, Helvetica, sans-serif;
		}
	</style>
	<body>

	
<h2>About</h2>	
	<p>
		Easy to use javascript plugin to draw nice boxes and arrows to your website from simple markup like <code>(User) &gt; (Admin)</code>
	</p>
<p>... which will be transformed to:</p>
<pre class="arrows-and-boxes">
(User) > (Admin)
</pre>
<p>
<a class="arrowed" href="http://github.com/headjump/arrows-and-boxes" title="Arrows-and-boxes from Dennis Treder at Github">Get or fork it at Github!</a>
</p>
	<p>
		The following examples are no screenshots - they are dynamically created by Arrows-and-boxes with the code displayed above each example ;)
	</p>
	
	<h3>Setup (it's easy!)</h3>
	
	<ol>
		<li>
			Put javascript links inside HTML head to <code>jquery.js, jquery.wz_jsgraphics.js, arrowsandboxes.js</code>
		</li>
		<li>
			Put a css link inside HTML head to <code>arrowsandboxes.css</code>
		</li>
		<li>
			<p>
			Place a &lt;pre&gt; block around your arrows-and-boxes markup and set the class to <code>arrows-and-boxes</code>:
			</p>
			<p>
<strong><em> &lt;pre class="arrows-and-boxes"&gt;</em> (User) > (Admin) <em>&lt;/pre&gt; </em></strong>
</p>
			<p>
			Arrows-and-boxes automatically detects the code and builds nice boxes and arrows from it.
			</p>
		</li>
	</ol>
	
	
<h2>Basic example</h2>
<p>
Inline arrows and nodes:
</p>		
<pre>
(Dennis) >likes (Food)
</pre>
<pre class="arrows-and-boxes">
(Dennis) >likes (Food)
</pre>

<ul>
	<li>
		Define a box with "( )", and a link with "&gt;", "&lt;", "-".
	</li>
	<li>
		An arrow can be put between Boxes in a single line, or inside a box, if the target is "further away" (see below for an example)
	</li>
	<li>
		Basic box format: <code>(box_title | box_subtitle)</code>
	</li>
	<li>
		Complete box format: <code>(box_id{custom_class}: box_title | box_subtitle &gt;arrow_label [arrow_target1, arrow_target2, ...] &lt;arrow2_label [arrow2_target])</code>
	</li>
</ul>

<h2>New lines</h2>
<p>
Nodes will be placed after each other in one line. Start a new line with "||".
</p>
<pre>
(Node1) (Node1_2) ||
(Node2) || (Node3)
</pre>
<pre class="arrows-and-boxes">
(Node1) (Node1_2) ||
(Node2) || (Node3)
</pre>


<h2>Different arrow types</h2>
		
<pre>
(arrow) - (normal) ||
(arrow) > (one direction) ||
(arrow) < (other direction) ||
(arrow) <> (and back)
</pre>
<pre class="arrows-and-boxes">
(arrow) - (normal) ||
(arrow) > (one direction) ||
(arrow) < (other direction) ||
(arrow) <> (and back)
</pre>

<h2>Linking elswhere</h2>
<p>
	Writing <code>(node_id: My Node)</code> gives the node the id "node_id" (must be followed by ":"). You can use it to define a target for a link inside a node definition
</p>		
<pre>
(Dennis >likes [d,m]) ||
(d:Drinks) (m:Money)
</pre>
<pre class="arrows-and-boxes">
(Dennis >likes [d,m]) ||
(d:Drinks) (m:Money)
</pre>
<ul>
	<li>
		Arrows between boxes: <code>&gt;arrow_label</code>
	</li>
	<li>
		Arrows defined INSIDE a box: <code>&gt;arrow_label [arrow_target1, arrow_target2, ...]</code>
	</li>
</ul>

<h2>Want subtitles?</h2>
	
<p>
Writing a "|" after your title makes the rest of the text a subtitle. If it's too large to fit the boy, hover with your mouse to make it visible. Using "|" on an arrow label will cause a line break.
</p>	
<pre>
(Dennis|has a subtitle) > label | new line (node)
</pre>
<pre class="arrows-and-boxes">
(Dennis|has a subtitle) > label | new line (node)
</pre>



<h2>Highlight nodes and arrows!</h2>
		
<pre>
(boring) > (boring) >> ((Highlighted))
</pre>
<pre class="arrows-and-boxes">
(boring) > (boring) >> ((Highlighted))
</pre>

<h2>Use Dummy nodes to get more space</h2>
		
<p>
Defining a node without a title (= empty node) makes it a "Dummy node". It won't be visible, but gives some space.
</p>
<p>
Dummy nodes can also have ids and arrows, so you can acutally use them as arrow-targets and -sources.
</p>

<pre>
(Dennis) -likes () > (Food)
</pre>
<pre class="arrows-and-boxes">
(Dennis) -likes () > (Food)
</pre>

<h2>Use Dummy nodes to bend your arrows</h2>
		
<pre>
(Dennis) - (>likes[f]) ||
() (f:Food)
</pre>

<pre class="arrows-and-boxes">
(Dennis) - (>likes[f]) ||
() (f:Food)
</pre>


<h2>HTML in your texts</h2>
	
<p>
Put <code>{{ }}</code> around something let's you  use HTML inside node titles, subtitles and arrow labels. So you can use anything you like (images and stuff).
</p>	
<pre>
(Dennis) > links ({{&lt;a href="http://www.headjump.de"&gt;headjump.de&lt;/a&gt;}})
</pre>
<pre class="arrows-and-boxes">
(Dennis) >links ({{<a href="http://www.headjump.de">headjump.de</a>}})
</pre>

<h2>Custom classes for your nodes</h2>

<p>
	Writing <code>{my_class_name}</code> before the ":" that is used to seperate the node id from the title will add the classname to the created node. Inspect the element if you don't trust me:
</p>		
<pre>
({custom_class}:Custom class)
</pre>
<pre class="arrows-and-boxes">
({custom_class}:Custom class)
</pre>
	</body>
</html>